<template>
	<view class="container">
		<view>
			<monthly-title class="logo" title="体重成长数据"></monthly-title>
			<view class="body">
				<view class="height body-content">
					<text>身高</text>
					<text>{{currentValue.height}}cm</text>
				</view>
				<view class="weight body-content">
					<text>体重</text>
					<text>{{currentValue.weight}}kg</text>
				</view>
				<view class="head body-content">
					<text>头围</text>
					<text>{{currentValue.header}}cm</text>
				</view>
				<u-image
					v-if="currentValue.bodyImage"
					shape="circle"
					width="353" 
					height="353"
					:src="currentValue.bodyImage"></u-image>
				<view v-else class="upload-hint">
					<text>请上传图片</text>
					<text>点击左下角“编辑”</text>
				</view>
				<u-image class="bg" width="478rpx" height="404rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_two_3.png"></u-image>
			</view>
			<view class="info">
				<text>{{currentValue.childrenName}}</text>
				<text>已满{{currentValue.childrenMonth}}个月了</text>
				<text>一起看看</text>
				<text>{{currentValue.childrenName}}宝宝成长</text>
			</view>
		</view>
		
		<view v-show="!show" class="content">
			<assess-bmi-view
				:bmi="bmi" 
				:name="currentValue.childrenName"
				:gender="currentValue.gender"
				:height="currentValue.height"
				:weight="currentValue.weight"/>
		</view>
		
		<cover-view v-if="type === 'create'" class="edit" @click="editClick">
			<cover-view>编辑</cover-view>
		</cover-view>
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<u-form :model="form" ref="uForm">
						<u-form-item label="身高"><u-input v-model="form.height"/></u-form-item>
						<u-form-item label="体重"><u-input v-model="form.weight"/></u-form-item>
						<u-form-item label="头围"><u-input v-model="form.header"/></u-form-item>
						<u-form-item label="照片" :border-bottom="false">
							<x-upload
								ref="uUpload"
								:form-data="formData"
								@onUploaded="onUploaded"
								:hasVideo="false"
								:maxCount="1"
							/>
						</u-form-item>
					</u-form>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="actionClick">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import AssessBmiView from '../../components/assess-bmi-view.vue'
	import MonthlyTitle from './monthly-title.vue'
	import XUpload from '@/components/x-upload'
	import { getBmiInfo } from '@/api/evaluate.js'
	export default {
		name: 'BodyInfo',
		components: {
			MonthlyTitle,
			XUpload,
			AssessBmiView
		},
		props: {
			type: {
				type: String,
				default () {
					return 'create'
				}
			},
			value: {
				type: Object,
				default () {
					return {}
				}
			},
			bmi: {
				type: Object,
				default (){
					return {}
				}
			},
		},
		computed: {
			currentValue: {
			  get () {
				return this.value
			  },
			  set (val) {
				  console.log(val)
				  this.$emit('input', val)
			  }
			},
		},
		data() {
			return {
				show: false,
				form: {},
				
				formData: {
					'bizType': 'monthly'
				}
			}
		},
		created() {
			// console.log('123456');
			// this.currentBmi = this.bmi;
			// console.log(this.currentBmi);
			this.form = { ...this.currentValue }
		},
		methods: {
			actionClick() {
				this.$refs.uUpload.upload();
			},
			
			onUploaded(data) {
				this.form.bodyImage = data.resourceUrl;
				this.currentValue = { ...this.form };
				this.show = false;
				// this.getBmi();
			},
			
			editClick() {
				this.show = true;
			},
			
			getBmi() {
				const params = {
					name: this.currentValue.childrenName,
					birthday: this.$u.timeFormat(this.currentValue.birthday, 'yyyy-mm-dd'),
					gender: this.currentValue.gender,
					height: this.currentValue.height,
					weight: this.currentValue.weight,
				}
				console.log(params);
				getBmiInfo(params).then(res => {
					console.log(res)
					this.currentBmi = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.edit{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		width: 88rpx;
		height: 88rpx;
		// background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
		background: #F5AC3C;
		border: 3rpx solid rgba(255,255,255,0.3);
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
		border-radius: 50%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.popup{
		padding: 30rpx;
	}
	
	.container{
		height: 100%;
		
		.content{
			position: absolute;
			top: 585rpx;
		}
		
		.logo{
			position: absolute;
			left: 27rpx;
			top: 0rpx;
		}
		
		.info{
			position: absolute;
			top: 210rpx;
			left: 31rpx;
			display: flex;
			flex-direction: column;
			
		}
		
		.body{
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 30rpx;
			top: 115rpx;
			width: 478rpx;
			height: 404rpx;
			
			.bg{
				position: absolute;
				top: 0rpx;
				left: 0rpx;
			}
			
			.body-content{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #826140;
			}
			
			.height{
				left: -15rpx;
				top: 0rpx;
				position: absolute;
				width: 123rpx;
				height: 98rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_two_2.png');
			}
			
			.weight{
				left: -38rpx;
				bottom: 32rpx;
				position: absolute;
				width: 123rpx;
				height: 98rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_two_2.png');
			}
			
			.head{
				right: 72rpx;
				bottom: -50rpx;
				position: absolute;
				width: 123rpx;
				height: 98rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_two_2.png');
			}
		}
	}
	
	.upload-hint{
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>